<template>
  <div class="main">
    <img src="./assets/bg.jpg" alt="" />
    <div id="app">
      <div id="nav">
        <!-- 结构 -->
        <!-- 头部 -->
        <Top/>
        <!-- 内容 -->
        <Comment/>
        <!-- 底部 -->
        <Button/>
      </div>
      <!-- <router-view/> -->
    </div>
  </div>
</template>

<script>
import Top from "@/components/Top.vue";
import Comment from "@/views/Comment.vue";
import Button from '@/components/Button.vue'
export default {
  components: {
    Top,
    Comment,
    Button
  },
};
</script>
<style scoped lang="less">
/*scoped:不会样式渲染 */
.main {
  height: 100%;
  position: relative;
  overflow: hidden;
  img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    filter: blur(40px); //滤镜效果属性
  }
  #app {
    width: 1000px;
    position: relative;
    height: 100px;   
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>


